<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>{echo admin_title()}</title>
	{template _header}
	<style>
	.check-status-0 {color:#DDDDDD;}
	.check-status-1 {color:#009688;}
	.check-status-2 {color:#FF5722;}
	.check-status--1 {color:#FFB800;}
	.select-autoComplete{
		display: none;
		top: 10px!important;
		line-height: 2em;
		position: relative;
		padding: 1em 0.5em;
		color:rgb(85, 85, 85);
		box-shadow:rgba(0, 0, 0, 0.5) 0px 3px 5px;
		transform: scale(1);
		z-index: 999; background: #fff;
	}
	.tips .weui-dialog__bd{ font-size: 14px; text-align: left;}
	</style>
</head>
<body>
	<div class="weui-tab">
		<div class="weui-tab__panel">
			<form enctype="multipart/form-data" method="post" name="form1" novalidate>
				<div class="weui-form">
					<div class="weui-cells__title" style="margin-bottom:8px">进件类型</div>
					<div class="weui-cells weui-cells_checkbox sign_type">
						<label class="weui-cell weui-cell_active weui-check__label" for="sign_alipay">
							<div class="weui-cell__hd">
								<input type="checkbox" class="weui-check" id="sign_alipay" checked="checked" required tips="请选择至少一个进件类型" />
								<i class="weui-icon-checked"></i>
							</div>
							<div class="weui-cell__bd"><p>支付宝</p></div>
						</label>
						<label class="weui-cell weui-cell_active weui-check__label" for="sign_weixin">
							<div class="weui-cell__hd">
								<input type="checkbox" class="weui-check" id="sign_weixin" checked="checked"/>
								<i class="weui-icon-checked"></i>
							</div>
							<div class="weui-cell__bd"><p>微信</p></div>
						</label>
					</div>
					<input type="hidden" id="weixin" name="weixin" value="1">
					<div class="weui-cells__title" style="margin-bottom:8px">商户信息</div>
					<div class="weui-cells weui-cells_form">
						<div class="weui-cell">
							<div class="weui-cell__hd"><label class="weui-label">商户名称</label></div>
							<div class="weui-cell__bd"><input id="merchant_name" name="merchant_name" class="weui-input" placeholder="填写营业执照商户名称" required /></div>
						</div>
						<div class="weui-cell weui-cell_select weui-cell_select-after">
							<div class="weui-cell__hd"><label class="weui-label">商户类型</label></div>
							<div class="weui-cell__bd">
								<select class="weui-select" id="merchant_type" name="merchant_type" dir="rtl">
									<!--{loop model('Merchant')->get_type() $key $val}-->
									<option value="{$val}">{$val}</option>
									<!--{/loop}-->
								</select>
							</div>
						</div>
						<div class="weui-cell weui-cell_select weui-cell_select-after">
							<div class="weui-cell__hd"><label class="weui-label">行业类型</label></div>
							<div class="weui-cell__bd">
								<select class="weui-select" id="merchant_industry" name="merchant_industry" dir="rtl">
									<!--{loop model('Merchant')->get_industry() $key $val}-->
									<option value="{$val}">{$val}</option>
									<!--{/loop}-->
								</select>
							</div>
						</div>
						<div class="weui-cell">
							<div class="weui-cell__hd"><label class="weui-label">商户简称</label></div>
							<div class="weui-cell__bd"><input id="merchant_shortname" name="merchant_shortname" class="weui-input" placeholder="填写商户简称" required /></div>
						</div>
						<div class="weui-cell">
							<div class="weui-cell__hd"><label class="weui-label">客服电话</label></div>
							<div class="weui-cell__bd"><input id="service_phone" name="service_phone" class="weui-input" placeholder="填写客服电话" required /></div>
						</div>
					</div>
					<div class="weui-cells__title" style="margin-bottom:8px">联系人信息</div>
					<div class="weui-cells weui-cells_form">
						<div class="weui-cell">
							<div class="weui-cell__hd"><label class="weui-label">负责人姓名</label></div>
							<div class="weui-cell__bd"><input id="per_name" name="per_name" class="weui-input" placeholder="填写负责人姓名" required /></div>
						</div>
						<div class="weui-cell">
							<div class="weui-cell__hd"><label class="weui-label">负责人身份证号</label></div>
							<div class="weui-cell__bd"><input id="per_id_number" name="per_id_number" class="weui-input" placeholder="填写负责人身份证号" value="" /></div>
						</div>
						<div class="weui-cell">
							<div class="weui-cell__hd"><label class="weui-label">联系电话</label></div>
							<div class="weui-cell__bd"><input id="per_phone" name="per_phone" class="weui-input" placeholder="填写联系电话" required /></div>
						</div>
						<div class="weui-cell">
							<div class="weui-cell__hd"><label class="weui-label">联系邮箱</label></div>
							<div class="weui-cell__bd"><input id="per_email" name="per_email" class="weui-input" placeholder="填写联系邮箱" required /></div>
						</div>
					</div>
					<div class="weui-cells__title" style="margin-bottom:8px">门店信息(与开户银行地区一致)</div>
					<div class="weui-cells weui-cells_form" id="area-picker">
						<div class="weui-cell">
							<div class="weui-cell__hd"><label class="weui-label">省市区</label></div>
							<div class="weui-cell__bd"><p class="area-selector" style="text-align: right; color: rgba(0, 0, 0, 0.5);">请选择省市区</p></div>
						</div>
						<input type="hidden" id="province" name="province" value="">
						<input type="hidden" id="city" name="city" value="">
						<input type="hidden" id="county" name="county" value="">
						<input type="hidden" id="area_code" name="area_code" value="">
						<!-- <div class="weui-cell weui-cell_select weui-cell_select-after">
							<div class="weui-cell__hd"><label class="weui-label">所属省级</label></div>
							<div class="weui-cell__bd">
								<select class="weui-select province-selector" id="province" name="province">
									<option value="">请选择省</option>
								</select>
							</div>
						</div>
						<div class="weui-cell weui-cell_select weui-cell_select-after">
							<div class="weui-cell__hd"><label class="weui-label">所属市级</label></div>
							<div class="weui-cell__bd">
								<select class="weui-select city-selector" id="city" name="city">
									<option value="">请选择市</option>
								</select>
							</div>
						</div>
						<div class="weui-cell weui-cell_select weui-cell_select-after">
							<div class="weui-cell__hd"><label class="weui-label">所属区级</label></div>
							<div class="weui-cell__bd">
								<select class="weui-select county-selector" id="county" name="county">
									<option value="">请选择区</option>
								</select>
							</div>
						</div> -->
						<div class="weui-cell">
							<div class="weui-cell__hd"><label class="weui-label">经营地址</label></div>
							<div class="weui-cell__bd"><input id="address" name="address" class="weui-input" placeholder="填写详细经营地址" required /></div>
						</div>
					</div>
					<div class="weui-cells__title" style="margin-bottom:8px">商户收款账户</div>
					<div class="weui-cells weui-cells_form">
						<div class="weui-cell">
							<div class="weui-cell__hd"><label class="weui-label">支付宝账号</label></div>
							<div class="weui-cell__bd"><input id="alipay" name="alipay" class="weui-input" placeholder="填写支付宝账号"/></div>
						</div>
						<div class="weui-cell weui-cell_select weui-cell_select-after">
							<div class="weui-cell__hd"><label class="weui-label">银行账户类型</label></div>
							<div class="weui-cell__bd">
								<select class="weui-select" id="bank_account_type" name="bank_account_type" dir="rtl">
									<option value="BANK_ACCOUNT_TYPE_CORPORATE">对公银行账户</option>
									<option value="BANK_ACCOUNT_TYPE_PERSONAL">经营者个人银行卡</option>
								</select>
							</div>
						</div>
						<div class="weui-cell">
							<div class="weui-cell__hd" style="width:105px; overflow: hidden;">
								<label class="weui-label">银行全称
									<i class="iconfont icon-tips" data-tips="需要与门店地址保持一致"></i>
								</label>
							</div>
							<div class="weui-cell__bd"><input id="account_bank" name="account_bank" class="weui-input" placeholder="填写开户银行全称"/></div>
						</div>
						<!-- <div class="weui-cell">
							<div class="weui-cell__hd"><label class="weui-label">开户名称</label></div>
							<div class="weui-cell__bd"><input id="account_name" name="account_name" class="weui-input" placeholder="填写开户名称"/></div>
						</div> -->
						<div class="weui-cell">
							<div class="weui-cell__hd"><label class="weui-label">银行卡号</label></div>
							<div class="weui-cell__bd"><input id="account_number" name="account_number" class="weui-input" placeholder="填写银行卡号"/></div>
						</div>
					</div>
					<div class="weui-cells__title" style="margin-bottom:8px">备注信息</div>
					<div class="weui-cells weui-cells_form">
						<div class="weui-cell">
							<div class="weui-cell__bd">
								<textarea class="weui-textarea" placeholder="请填写备注" rows="3" id="remarks" name="remarks"></textarea>
								<div class="weui-textarea-counter"><span>0</span>/200</div>
							</div>
						</div>
					</div>
					<div class="weui-cells__title" style="margin-bottom:8px">附件上传</div>
					<div class="weui-cells weui-cells_form" id="uploader">
						<div class="weui-cell">
							<div class="weui-cell__bd">
								<div class="weui-uploader">
									<div class="weui-uploader__hd">
										<p class="weui-uploader__title">法人身份证人像面</p>
									</div>
									<div class="weui-uploader__bd">
										<ul class="weui-uploader__files uploaderFiles">
										</ul>
										<div class="weui-uploader__input-box">
											<input class="uploaderInput weui-uploader__input" type="file" name="id_card_copy" accept="image/*" multiple/>
										</div>
									</div>
								</div>
							</div>
						</div>
						<div class="weui-cell">
							<div class="weui-cell__bd">
								<div class="weui-uploader">
									<div class="weui-uploader__hd">
										<p class="weui-uploader__title">法人身份证国徽面</p>
									</div>
									<div class="weui-uploader__bd">
										<ul class="weui-uploader__files uploaderFiles">
										</ul>
										<div class="weui-uploader__input-box">
											<input class="uploaderInput weui-uploader__input" type="file" name="id_card_national" accept="image/*" multiple/>
										</div>
									</div>
								</div>
							</div>
						</div>
						<div class="weui-cell">
							<div class="weui-cell__bd">
								<div class="weui-uploader">
									<div class="weui-uploader__hd">
										<p class="weui-uploader__title">营业执照</p>
									</div>
									<div class="weui-uploader__bd">
										<ul class="weui-uploader__files uploaderFiles">
										</ul>
										<div class="weui-uploader__input-box">
											<input class="uploaderInput weui-uploader__input" type="file" name="license_copy" accept="image/*" multiple/>
										</div>
									</div>
								</div>
							</div>
						</div>
						<div class="weui-cell">
							<div class="weui-cell__bd">
								<div class="weui-uploader">
									<div class="weui-uploader__hd">
										<p class="weui-uploader__title">门店门口照片
											<i class="iconfont icon-tips" data-tips="门店场所：提交门店门口照片，要求招牌清晰可见<br>流动经营/便民服务：提交经营/服务现场照片<br>线上商品/服务交易：提交店铺首页截图"></i>
										</p>
									</div>
									<div class="weui-uploader__bd">
										<ul class="weui-uploader__files uploaderFiles">
										</ul>
										<div class="weui-uploader__input-box">
											<input class="uploaderInput weui-uploader__input" type="file" name="store_door" accept="image/*" multiple/>
										</div>
									</div>
								</div>
							</div>
						</div>
						<div class="weui-cell">
							<div class="weui-cell__bd">
								<div class="weui-uploader">
									<div class="weui-uploader__hd">
										<p class="weui-uploader__title">店内环境照片
											<i class="iconfont icon-tips" data-tips="门店场所：提交店内环境照片<br>流动经营/便民服务：可提交另一张经营/服务现场照片<br>线上商品/服务交易：提交店铺管理后台截图"></i>
										</p>
									</div>
									<div class="weui-uploader__bd">
										<ul class="weui-uploader__files uploaderFiles">
										</ul>
										<div class="weui-uploader__input-box">
											<input class="uploaderInput weui-uploader__input" type="file" name="store_inside" accept="image/*" multiple/>
										</div>
									</div>
								</div>
							</div>
						</div>
						<div class="weui-cell">
							<div class="weui-cell__bd">
								<div class="weui-uploader">
									<div class="weui-uploader__hd">
										<p class="weui-uploader__title">特殊资质照片
											<i class="iconfont icon-tips" data-tips="特殊行业：如餐饮食品，需提供《食品流通许可证》或《食品卫生许可证》，详情参见特殊资质类目"></i>
										</p>
									</div>
									<div class="weui-uploader__bd">
										<ul class="weui-uploader__files uploaderFiles">
										</ul>
										<div class="weui-uploader__input-box">
											<input class="uploaderInput weui-uploader__input" type="file" name="qualifications" accept="image/*" multiple/>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="weui-form__tips-area" style="background: #fff; padding:24px 0;">
						<p class="weui-form__tips" style="font-size: 12px; color:rgba(0,0,0,.5); text-align: center;">
							上传图片支持jpeg、jpg、bmp、png格式，<br>图片大小不超过2M
						</p>
					</div>
					<div class="weui-form__opr-area" style="background: #fff; padding: 0 1em 2em;">
						<button type="submit" class="weui-btn weui-btn_primary">提交</button>
					</div>
				</div>
			</form>
		</div>
		{template _main_nav}
	</div>

	<div class="weui-gallery" id="gallery">
		<span class="weui-gallery__img" id="galleryImg"></span>
		<div class="weui-gallery__opr">
			<a href="javascript:" class="weui-gallery__del">
				<i class="weui-icon-delete weui-icon_gallery-delete"></i>
			</a>
		</div>
	</div>

	<script src="/public/js/autoComplete.js"></script>
	<script src="/public/m/areaSelect.js"></script>
	<script>
	//地区选择
	var areaSelect = new AreaSelect({
		style: 'weui',
		defaultAreaCode: '110101',
		onChange: function(data) {
			$('#area_code').val(data.countyCode);
			$('#province').val(data.province);
			$('#city').val(data.city);
			$('#county').val(data.county);
			$(this.areaSelector).css('color','#000');
		}
	});
	//图片上传
	var tmpl = '<li class="weui-uploader__file" style="background-image:url(#url#)"></li>',
		gallery = $("#gallery"), galleryImg = $("#galleryImg"), galleryImgOrigin,
		uploader = $('#uploader'), maxsize = 1024 * 1024 * 2
		;
	uploader.on("change", '.uploaderInput', function(e){
		let uploaderFiles = $(this).parent().prev();
		if(uploaderFiles.children().length >= 1){
			return alert('一张图片够了');
		}
		var src, url = window.URL || window.webkitURL || window.mozURL, files = e.target.files;
		for (var i = 0, len = files.length; i < len; ++i) {
			var file = files[i];
			if (!'image/jpeg, image/jpg, image/bmp, image/png'.match(file.type)) {
				return weui.topTips('图片格式不支持');
			}
			if (file.size > maxsize) {
				return weui.topTips('图片不能大于2M');
			}
			if (url) {
				src = url.createObjectURL(file);
			} else {
				src = e.target.result;
			}
			uploaderFiles.append($(tmpl.replace('#url#', src)));
		}
		$(this).parent().hide();
	});
	uploader.on("click", ".uploaderFiles li", function(){
		galleryImgOrigin = $(this);
		galleryImg.attr("style", this.getAttribute("style"));
		gallery.fadeIn(100);
	});
	gallery.on("click", function(){
		gallery.fadeOut(100);
	});
	$(".weui-gallery__del").click(function() {
		galleryImgOrigin.parent().next().show();
		galleryImgOrigin.remove();
	});

	$('textarea.weui-textarea').change(function(e){
		$(this).next().html('<span>' + this.value.length + '</span>/200');
	})

	//提交
	$('form[name="form1"]').submit(function(ev) {
		ev.preventDefault();
		weui.form.validate('form[name=form1]', function (error) {
			if (!error) {
				var data = new FormData(ev.target);
				var loading = weui.loading('加载中');
				$.ajax({
					type: 'POST',
					url:'/mo/merchant/add',
					data: data,
					contentType: false,
					processData: false,
					success: result => {
						loading.hide();
						if(result.status == 1){
							weui.toast('操作成功');
							localStorage.removeItem('merchantAddFormdata');
							location.assign('/mo/merchant/check');
						}else{
							weui.topTips('添加失败:' + result.message);
						}
					},
					error: (xhr, errorType, error) => {
						weui.topTips('请求出错:' + xhr.status + ' ' + error);
					}
				})
			}
		})
		return false;
	});
	//银行账户全称自动完成
	jQuery('form input[name=account_bank]').autoComplete({
		url: "{echo url('banks/index')}",
		field: "",
		value: "",
		name_hidden: "bank_code",
		value_hidden: "",
	});
	$('form input[name=account_bank]').focus(function() {
		$(this).parents('.weui-cell__bd').prev().animate({width: '0px'}, 200, 'ease-out')
	});
	$('form input[name=account_bank]').blur(function() {
		$(this).parents('.weui-cell__bd').prev().animate({width: '105px'}, 200, 'ease-out')
	});
	//根据进件类型显示字段
	$('.sign_type').on('click', 'input[type=checkbox]', e => {
		if (e.target.id == 'sign_alipay') {
			if (e.target.checked) {
				$('#alipay').parents('.weui-cell').show();
			}else{
				$('#alipay').parents('.weui-cell').hide();
			}
		}
		if (e.target.id == 'sign_weixin') {
			if (e.target.checked) {
				$('#per_id_number').parents('.weui-cell').show();
				$('input#weixin').val(1);
				$('#bank_account_type').parents('.weui-cell').show();
				$('#account_bank').parents('.weui-cell').show();
				$('#account_name').parents('.weui-cell').show();
				$('#account_number').parents('.weui-cell').show();
			}else{
				$('#per_id_number').parents('.weui-cell').hide();
				$('input#weixin').val(0);
				$('#bank_account_type').parents('.weui-cell').hide();
				$('#account_bank').parents('.weui-cell').hide();
				$('#account_name').parents('.weui-cell').hide();
				$('#account_number').parents('.weui-cell').hide();
			}
		}
	})
	$('.icon-tips').on('click', e => {
		weui.alert($(e.target).data('tips'), {className: 'tips'});
	})
	//页面意外退出表单数据恢复
	let recoverData = JSON.parse(localStorage.getItem('merchantAddFormdata'));
	if(recoverData){
		weui.confirm('是否继续上次填写？', function(){
			for(var pair of recoverData) {
				let elem = document.getElementById(pair.name) || document.querySelector('[name=' + pair.name + ']');
				if(elem) elem.value = pair.value;
			}
			if($('#area_code').val()){
				$('#area-picker .area-selector').text( $('#province').val() + $('#city').val() + $('#county').val() ).css('color', '#000');
			}
		}, function() {
			localStorage.removeItem('merchantAddFormdata');
		});
	}
	$('body').on('change', 'input,select,textarea', function(e){
		let data = JSON.stringify($('form[name=form1]').serializeArray());
		localStorage.setItem('merchantAddFormdata', data);
	})
	</script>
</body>
</html>